import React, { useState } from 'react'
import { useNavigate } from 'react-router-dom'
// import './Collect.css'

export default function Collect() {
    const navigate = useNavigate()
    const [collect, setCollect] = useState([
        { title: '持续高热不退，头痛咳嗽', doctor: '张三被 第三人民医院', c1: 52, c2: 25, c3: 18, img: '../logo.png' },
        { title: '持续高热不退，头痛咳嗽', doctor: '张三被 第三人民医院', c1: 52, c2: 25, c3: 18, img: '../logo.png' },
        { title: '持续高热不退，头痛咳嗽', doctor: '张三被 第三人民医院', c1: 52, c2: 25, c3: 18, img: '../logo.png' },
    ])
    return (
        <div className='resetphone'>
            <div className='resetphone-header'>
                <h1>我的收藏</h1>
                <span onClick={() => { navigate(-1) }}>&lt;</span>
            </div>
            <div className="resetphone-content">
                {
                    collect.map((item, index) => {
                        return <div key={index} className="text-item" onClick={() => { navigate('/articleDetail') }}>
                            <img src={item.img} alt="" style={{ width: '100px', height: '100px', position: 'absolute', top: '10px', right: '10px', background: 'white' }} />
                            <div className='text-item-right'>
                                <h3>{item.title}</h3>
                                <p>{item.doctor}</p>
                                <div className='text-item-right-bottom'>
                                    <span>点赞 {item.c1}</span>
                                    <span>评论 {item.c2}</span>
                                    <span>收藏 {item.c3}</span>
                                </div>
                            </div>
                        </div>
                    })
                }
            </div>
        </div>
    )
}
